<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>关卡</title>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
  <link rel="stylesheet" href="css/barrier.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  
  <script type="text/javascript" src="js/adapter.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div class="content">
    <div class="logo">
      <img src="img/logo.png" />
    </div>
    <div class="theme">
      <img src="img/theme.png" />
    </div>
    <div class="subTop">
      <div class="picture">
        <img src="img/title2.png" />
      </div>

    </div>
    <div class="back">
      <div class="backBtn">
        <a href="javascript:history.go(-1)"><img src="img/closeBtn.png" /></a>
      </div>

    </div>
    <div class="middlePath">

      <div class="title">
        <img src="img/barrier_title.png" alt="">
      </div>
      <div class="middleContent">
        <div class="barrierOut" v-for="(barrier,index) in barriers" :key="barrier.id" @click="choseBarrier(index)" >
          <div class="barrierItem">{{barrier.num}}</div>

        </div>
      </div>
    </div>
    <div class="bottom-logo">
      <img src="img/bottom_logo2.png" />
    </div>
  </div>
</body>
<script>

  var app = new Vue({
    el: '.content',
    data: {
      barriers: [
        { id: 1, num: 1 },
        { id: 2, num: 2 },
        { id: 3, num: 3 },
        { id: 4, num: 4 },
        { id: 5, num: 5 },
        { id: 6, num: 6 },
        { id: 7, num: 7 },
        { id: 8, num: 8 },
        { id: 9, num: 9 },
        { id: 10, num: 10 },
        { id: 11, num: 11 },
        { id: 12, num: 12 },
        { id: 13, num: 13 },
        { id: 14, num: 14 },
        { id: 15, num: 15 },
        { id: 16, num: 16 },
        { id: 17, num: 17 },
        { id: 18, num: 18 },
        { id: 19, num: 19 },
        { id: 20, num: 20 },
        { id: 21, num: 21 },
        { id: 22, num: 22 },
        { id: 23, num: 23 },
        { id: 24, num: 24 },
        { id: 25, num: 25 },
        { id: 26, num: 26 },
        { id: 27, num: 27 },
        { id: 28, num: 28 },
        { id: 29, num: 29 },
        { id: 30, num: 30 },
        { id: 31, num: 31 },
        { id: 32, num: 32 },
        { id: 33, num: 33 },
        { id: 34, num: 34 },
        { id: 35, num: 35 },
        { id: 36, num: 36 },
        { id: 37, num: 37 },
        { id: 38, num: 38 },
        { id: 39, num: 39 },
        { id: 40, num: 40 },
        { id: 41, num: 41 },
        { id: 42, num: 42 },
        { id: 43, num: 43 },
        { id: 44, num: 44 },
        { id: 45, num: 45 },
        { id: 46, num: 46 },
        


      ]
    },
    methods:{
    	choseBarrier(index){
    		console.log(index+1)
    	}
    }
  })
</script>

</html>